<template>
	<view class="content">
		<view class="fortune_cur">
			<text>当前福分：</text>
			<text class="num-font">{{fortune}}</text>
		</view>
		<text class="ball" v-if="showCoinAnimation" :animation="animationData[index]" :style="resetTop" v-for="(item, index) in ballList" :key="index"></text>
		<view class="wheel_box">
			<text class="wheel_box__desc">{{descFormat}}</text>

			<raffle-wheel ref="raffleWheel" :prizeList="prizeList" :strKey="strKey" :imgKey="imgKey" :canvas-width="canvasData.width"
			 :canvas-height="canvasData.height" :str-line-length="4" @actionStart="handleActionStart" @actionEnd="handleActionEnd"
			 @done="handleDrawDone" v-if="prizeList.length" />
		</view>
		<view class="rule" @tap="changeRule">活动规则</view>
		<uni-popup ref="dialogPopup" type="dialog">
			<uni-popup-dialog type="info" title="抽奖结果" :show-close="false" :content="targetName" @confirm="dialogPopupConfirm"
			 :duration="2000"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="rule_content">
				<text class="content_title">活动规则</text>
				<text>1、每个用户每日有一次免费抽奖的机会， 当指针停留在某个区域，那么该区域对应的则为最终奖励。</text>
				<text>2、免费机会用完后，用户可以用福分来赚取更多的福分，次数不限（1次机会扣除5福分）。</text>
				<text>3、活动最终解释权归牧耘郎平台所有。</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import RaffleWheel from '@/components/raffle-wheel/raffle-wheel.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	//福分临时储存
	let fortuneTemp;

	export default {
		components: {
			RaffleWheel,
			uniPopup,
			uniPopupDialog
		},
		computed: {
			descFormat() {
				return this.freeTimes > 0 ? `本次免费` : `${this.useFortune}福分/次`
			}
		},
		data() {
			return {
				// canvas 宽高
				canvasData: {
					width: 250,
					height: 250
				},
				strKey: 'describe',
				imgKey: 'img',
				// 奖品数据
				prizeList: [],
				// 中奖下标
				targetIndex: 0,
				// 中奖类目名称
				targetName: '',
				canvasImg: '',
				prizeDrawDesc: '', //抽奖描述
				freeTimes: 0, //剩余免费次数
				fortune: 0, //当前福分
				useFortune: 0, //每次消耗福分
				ballList: new Array(5), //小球数量 
				animationData: {}, //金币动画组
				showCoinAnimation: false, //是否显示动画
				resetTop: ''
			}
		},

		onLoad(options) {
			// 模拟请求奖品数据
			this.getPrizeList()
		},
		onUnload() {
			uni.hideLoading()
		},
		methods: {
			changeRule() {
				this.$refs.popup.open()
			},
			// 重新生成
			handleInitCanvas() {
				this.prizeList = []
				this.getPrizeList()
			},
			initCoinAnimation() {
				this.animation = null;
				this.animationData = {};
				this.showCoinAnimation = false;
				this.$forceUpdate();
				this.showCoinAnimation = true;
				
			},
			enterShow(showCoinAnimation) {
				this.showCoinAnimation = showCoinAnimation;
				if (!this.showCoinAnimation) return;
				for (let index = 0; index < this.ballList.length; index++) {
					let animation = uni.createAnimation({
						delay: 0,
						duration: 1000,
						timingFunction: "ease"
					})
					// animation.opacity(0).step()
					animation.scale(2, 2).translate3d(0, 50, 0).opacity(1).step()
					animation.scale(0.1, 0.1).translate3d(0, uni.upx2px(-800), 0).opacity(0).step();
					// #ifndef MP
					animation.translate3d(0, 0, 0).step();
					// #endif
					this.animation = animation;
					setTimeout(() => {
						this.animationData = { ...this.animationData,
							...{}
						}
						this.animationData[index] = animation.export()
					}, 100 * (index + 1))
				}
			},
			// 获取奖品列表
			async getPrizeList() {
				uni.showLoading({
					title: '奖品准备中',
					icon: 'loading',
					mask: true
				})

				// 请求奖品列表
				let params = {},
					method = 'POST',
					load = true,
					data = await Api.apiCall(method, Api.fortune.fortune_turntable, params, load);
				if (data) {
					this.prizeList = data.configs
					data.configs.forEach((e, index) => {
						if (this.prizeList[index].img) {
							this.prizeList[index].img = Api.imgsrc + e.img
						}
					});
					this.freeTimes = data.day_turntable;
					this.useFortune = data.use_fortune;
					this.fortune = data.fortune;
				}

			},
			// 本次抽奖开始
			async handleActionStart() {
				// // #ifdef MP
				// this.initCoinAnimation();
				// // #endif

				// 抽奖结果请求
				let params = {},
					method = 'POST',
					load = true,
					data = await Api.apiCall(method, Api.fortune.fortune_turntable_go, params, load);
				if (data) {
					this.freeTimes = data.day_turntable;
					this.targetIndex = this.prizeList.findIndex(e => {
						return e.id == data.id
					})
					// if (this.targetIndex == -1) return; //如果发现没有此下标，则阻止
					if (this.freeTimes == 0) this.fortune = this.fortune - this.useFortune;


					// 开始执行旋转定位
					this.$refs.raffleWheel.handleStartRotate(this.targetIndex)
				} else {
					// let targetIndex = -1; //选-1作为无下标结果
					// this.$refs.raffleWheel.handleStartRotate(targetIndex)
					if (this.useFortune > this.fortune) {
						let targetIndex = -1;
						this.$refs.raffleWheel.handleStartRotate(targetIndex)
						uni.hideToast();
						uni.showModal({
							title: '提示',
							content: '您的福分不足',
							showCancel: false
						});
					}
				}
			},
			// 本次抽奖结束
			async handleActionEnd() {
				console.log('旋转结束，执行拿到结果后到逻辑')
				let params = {},
					method = 'POST',
					load = true,
					data = await Api.apiCall(method, Api.fortune.fortune_turntable, params, load)
				fortuneTemp = data.fortune;
				if (!this.prizeList[this.targetIndex].describe.includes('再试试手气')) {
					this.targetName = `恭喜您，获得 ${this.prizeList[this.targetIndex].describe}`
					this.$refs.dialogPopup.open();
				} else {
					this.targetName = `差一点点就中奖了，再试试`
					this.$refs.dialogPopup.open();
					// this.fortune = data.fortune;
				}

			},
			dialogPopupConfirm() {
				this.$refs.dialogPopup.close();
				if (!this.prizeList[this.targetIndex].describe.includes('再试试手气')) {
					// #ifndef MP
					this.enterShow(true);
					// #endif
				}
				this.animationData = {}
				this.fortune = fortuneTemp
			},
			// 抽奖转盘绘制完成
			handleDrawDone() {
				console.log('抽奖转盘绘制完成')
				uni.hideLoading();
			}
		}

	}
</script>

<style lang="scss">
	page {
		// background-image: url(../../static/raffle-wheel/background.jpg);
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		object-fit: cover;
		overflow: hidden;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		width: 100vw;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;

		.ball {
			z-index: 10;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			width: 50upx;
			height: 50upx;
			// border-radius: 50%;
			// background-color: #FFF263;
			// background-image: url(../../static/coin.png);
			background-image: url('');
			background-repeat: no-repeat;
			background-size: 50upx 50upx;
			top: 550upx;
			opacity: 0;
		}

		.fortune_cur {
			position: absolute;
			top: 250upx;
			text-align: center;
			width: 100%;

			text {
				font-size: 32upx;
				color: #ff4f2f;
				font-weight: bolder;
				text-shadow: 0 4upx 3upx #ff898b;
			}
		}

		.rule {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 200upx;
			height: 68upx;
			border-radius: 34upx;
			background-color: #FF7353;
			font-size: 28upx;
			color: #FFF5E8;
			margin-top: 130upx;
		}

		.rule_content {
			width: 450upx;
			// height: 60vh;
			// overflow-y: scroll;
			// -webkit-overflow-scrolling: touch;
			border-radius: 15upx;
			backdrop-filter: saturate(150%) blur(25upx);
			background-color: rgba(255, 255, 255, .9);
			box-sizing: border-box;
			padding: 30upx;
			font-size: 24upx;
			display: flex;
			flex-flow: column wrap;

			align-items: flex-start;
			color: #6d6d6d;

			text {
				margin: 10upx;
			}

			.content_title {
				margin-bottom: 15upx;
				font-size: 28upx;
				color: #232323;
			}
		}

		.wheel_box {
			margin-top: 350upx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			z-index: 1;

			&__desc {
				position: absolute;
				z-index: 2;
				pointer-events: none;
				padding-top: 75upx;
				font-size: 18upx;
				color: rgba(255, 255, 255, .2);
			}
		}
	}
</style>
